事件綁定

指的就是將dom元素與function綁定再一起，以下會說明React會如何使用

方法一：純function

• 無需修改，這部分的描述是正確的，這是一個最簡單的事件綁定方法。

const btnClick = () => {
    console.log('btnclick')
}
<button onClick={btnClick}>click</button>

這裡的 onClick 綁定與 React 處理事件的方式相同，當用戶點擊按鈕時，btnClick 函數會被執行。

方法二：function 帶參數

function帶參數

• 說明：這裡的參數 e 是事件對象（event object），當 React 處理事件時，會自動將事件對象作為參數傳遞給事件處理函數。

const btnClick = (e) => {
    console.log('btnclick',e)
}
<button onClick={btnClick}>click</button>

這與原生 JavaScript 的事件處理函數類似，e 代表事件對象，包含如點擊的目標元素等信息。

方法三：function 傳遞自定義參數

• 注意事項：當你需要在事件處理函數中傳遞額外的參數時，必須使用箭頭函數來包裹，這樣你可以傳遞自定義的參數而不會立即執行該函數。

const btnClick = (name) => {
    console.log('btnclick',name)
}
<button onClick={()=>btnClick('jack')}>click</button>

如果你直接寫 onClick={btnClick('jack')}，這會立即執行 btnClick('jack')，而不是等待用戶點擊後才執行。所以必須用箭頭函數包裹，這樣可以延遲函數執行到事件觸發時。

相較於原生js

雖然在表面上，React 的 onClick 看起來與原生 JavaScript 的 onclick 屬性非常相似，但它們之間有一些關鍵區別。

• 事件委託
  React 並不是將事件直接綁定到每個 DOM 元素，而是通過一種叫事件委託的機制，將所有事件綁定到一個父容器（例如 document 或 body），然後通過事件冒泡的方式處理事件。這樣做可以提升性能，特別是在處理大量 DOM 元素的情況下。
  原生 JavaScript的onclick則會將事件處理程序直接綁定到具體的 DOM 元素上，這在處理大量 DOM 元素時可能會帶來性能問題。
• 事件合成
  React 使用一個合成事件系統（Synthetic Event）。合成事件是對瀏覽器原生事件的封裝，提供跨瀏覽器的兼容性。這意味著你在使用 React 處理事件時，無需擔心不同瀏覽器的差異。
  原生 JavaScrip 中，事件是直接來自瀏覽器的，每個瀏覽器可能在某些細節上有所不同。
• 命名約定
  React 中，事件處理函數的屬性命名是駝峰命名的（例如 onClick），這與原生JavaScript中的onclick不同。
  原生 JavaScript 中，事件屬性是全小寫的，如 onclick。

結論：雖然 React 中的 onClick 看起來與原生 JavaScript 的 onclick 相似，但 React 背後有更複雜的事件處理機制，這使得 React 的事件處理更高效、兼容性更強。

狀態變量useState

狀態變量：當值發生改變，組件的視圖UI也會跟著變化(數據驅動視圖)

1. useState 是一個 Hook，返回一個數組。
2. 數組中的第一個元素是當前的狀態變量，第二個元素是一個函數，該函數用來更新狀態變量。
3. useState 接受一個參數，作為狀態變量的初始值。

範例1：label跟著input更動

const [word, setValue] = useState('')

<input type='text' onChange={(event) => setValue(event.target.value)} />
<label>{word}</label>

在這個範例中，每當用戶在輸入框中輸入內容時，onChange 事件會觸發，並將輸入的值 (event.target.value) 設置為 word 變量，隨後 React 會重新渲染組件，並更新 label 內容。

範例2：list修改

const [form, setForm] = useState({ name: 'joy', age: 18 });

// 當修改 name 的值時，我們需要保留 age 屬性，使用展開運算符來保留其餘的狀態
const changeForm = (event) => {
  setForm({
    ...form,  // 保留其他屬性
    name: event.target.value
  });
};

<input type='text' onChange={changeForm} />
<label>name：{form.name}_{form.age}</label>

在這個範例中，我們使用展開運算符 ...form 來保留 form 狀態中其他未改變的屬性（如 age）。這樣做可以避免在更新 name 時意外地覆蓋掉 age。

結尾

useState 是 React 16.8 中引入的 Hooks 的一部分，它讓函數組件擁有了狀態管理的能力，從而讓代碼更加簡潔。雖然 useState 本身不會直接提高渲染性能，但它讓組件的狀態管理變得更靈活，並且使得函數組件能夠充分利用 React 的虛擬 DOM 機制進行高效的更新和渲染。

個人覺得這樣的寫法真的很舒服，相較於原生JS，在code上表現得更加直觀明確